<template>
    <div class="admin-dropdown">
        <div class="admin-notification">
            <el-dropdown>
                <span class="el-dropdown-link fs14">
                    <svg-icon icon="通知" style="margin-right: 2px;"></svg-icon>通知
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in dropdownList">
                            <svg-icon :icon="item.title" style="margin-right: 10px;"></svg-icon>
                            {{ item.title }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="admin-backend " @click="manageHref()">
            <svg-icon icon="管理后台" style="margin-right: 2px;"></svg-icon>管理后台
        </div>
        <div class="admin-user">
            <el-dropdown>
                <span class="el-dropdown-link fs14">
                    <svg-icon icon="用户" style="margin-right: 2px;"></svg-icon>Admin
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in userDropdownList" @click="chooseItem(item)">
                            <svg-icon :icon="item.title" style="margin-right: 10px;"></svg-icon>
                            {{ item.title }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, Ref } from 'vue';
import { useUserStore } from '../../../../stores/user';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
const dropIndex: any = ref(0);
const userStore = useUserStore();
const router = useRouter();
const dropdownList = [
    { title: '待办工单' },
    { title: '系统通知' },
]
const userDropdownList = [
    { title: '修改密码' },
    { title: '退出系统' },
]


const visible = ref(false);
const dataFormRef = ref();
const showPassword = ref(false);
const passwordReadonly = reactive<any>({
    sourcePassword: true,
    newPassword: true,
    newPasswordAgain: true
});
const dataForm = reactive({
    sourcePassword: '',
    newPassword: '',
    newPasswordAgain: ''
});
const manageHref = () => {
    window.name = 'largeScreen'
    window.open('http://10.100.50.50/eye_web/#/home/index', 'manage')
}
const logoutHandle = () => {
    ElMessageBox.confirm('确定要退出登录吗？', '退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true
                userStore
                    .logoutAction()
                    .then(() => {
                        ElMessage.success('退出登录成功')
                        router.replace('/login')
                    })
                    .finally(() => {
                        done()
                    })
            } else {
                done()
            }
        }
    })
};
const validatePassword = (rule: any, value: any, callback: any) => {
    const passwordReg =
        /(?!^[0-9]+$)(?!^[a-z]+$)(?!^[A-Z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,20}$/

    if (!value) {
        return callback(new Error('请输入新密码'))
    } else if (value.length < 6) {
        return callback(new Error('请输入至少6位新密码'))
    } else if (!passwordReg.test(value)) {
        return callback(new Error('请输入6-20位密码，包含数字、大小写字母和符号至少两种组合'))
    } else {
        callback()
    }
}

const closedHandle = () => {
    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields()
    }
}
const rules = reactive({
    sourcePassword: { required: true, trigger: 'blur', message: '请输入旧密码' },
    newPassword: { required: true, trigger: 'blur', validator: validatePassword },
    newPasswordAgain: { required: true, trigger: 'blur', validator: validatePassword }
})
const setReadonly = (key: string) => {
    setTimeout(() => {
        passwordReadonly[key] = !passwordReadonly[key]
    })
}
const modifyPasswordHandle = () => {
    visible.value = true
}
const confirmHandle = (done: Function, bthLoading: Ref) => {
    dataFormRef.value.validate((valid: boolean) => {
        if (valid) {
            bthLoading.value = true

            setTimeout(() => {
                bthLoading.value = false
            }, 1000);
        }
    })
}

const chooseItem = (item: any) => {
    if (item.title === '退出系统') {
        logoutHandle()
    }
}
</script>
<style lang="scss" scoped>
.admin-dropdown {
    width: 320px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .admin-backend {
        color: #FFFFFF;
        line-height: 2;
        font-weight: bold;
        cursor: pointer;
    }
}

.el-dropdown {
    color: #FFFFFF !important;
    cursor: pointer;
    line-height: 38px;
    letter-spacing: 1px;
    border: none !important;

}

.el-dropdown-item {
    color: #FFFFFF !important;

    &:hover {
        border: none !important;
    }
}

.el-dropdown-menu {
    background-color: rgba(9, 25, 57, 0.8) !important;
    border: 1px solid #00487f !important;
    border: none !important;
}

:focus-visible {
    outline: none;
}

.el-popper[x-placement^=bottom] {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;

}

.el-dropdown-menu__item:not(:last-of-type) {
    border-bottom: 1px solid #00487f;
}

/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow {
    border: none;
}

.el-dropdown-menu__item:not(.is-disabled) {
    color: #FFFFFF;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: #091939;
    color: #FFFFFF;

}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border: none;
}
</style>
